---
id: 62a23c1d505bfa13747c8a9b
title: Step 13
challengeType: 0
dashedName: step-13
---

# --description--

Загорніть числа `0`, `100` та `50` в елементи `span` та загорніть ці нові елементи `span` в елементи `strong`. Потім надайте новим елементам `span` відповідні значення `id`: `xpText`, `healthText` та `goldText`.

Your answer should follow this basic structure:

```html
<span class="stat">TEXT <strong><span id="VALUE">TEXT</span></strong></span>
```

# --hints--

Додайте елемент `strong` до першого елемента `.stat`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Перший новий елемент `strong` повинен мати елемент `span`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Перший вкладений елемент `span` повинен мати `id` зі значенням `xpText`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'xpText');
```

Перший елемент `span` має бути обгорнутим навколо тексту `0`.

```js
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText.trim(), '0');
```

Текстом першого елемента `.stat` досі має бути `XP: 0`.

```js
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText.trimEnd(), 'XP: 0');
```

Додайте елемент `strong` до другого елемента `.stat`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Другий новий елемент `strong` повинен мати елемент `span`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Другий вкладений елемент `span` повинен мати `id` зі значенням `healthText`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'healthText');
```

Другий елемент `span` має бути обгорнутим навколо тексту `100`.

```js
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText.trim(), '100');
```

Текстом другого елемента `.stat` досі має бути `Health: 100`.

```js
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText.trimEnd(), 'Health: 100');
```

Додайте елемент `strong` до третього елемента `.stat`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
```

Третій новий елемент `strong` повинен мати елемент `span`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
```

Третій вкладений елемент `span` повинен мати `id` зі значенням `goldText`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span?.id, 'goldText');
```

Третій елемент `span` має бути обгорнутим навколо тексту `50`.

```js
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.equal(span.innerText.trim(), '50');
```

Текстом третього елемента `.stat` досі має бути `Gold: 50`.

```js
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.innerText.trimEnd(), 'Gold: 50');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>RPG - Dragon Repeller</title>
    <script src="./script.js"></script>
  </head>
  <body>
    <div id="game">
      <div id="stats">
--fcc-editable-region--
        <span class="stat">XP: 0</span>
        <span class="stat">Health: 100</span>
        <span class="stat">Gold: 50</span>
--fcc-editable-region--
      </div>
      <div id="controls"></div>
      <div id="monsterStats"></div>
      <div id="text"></div>
    </div>
  </body>
</html>
```

```js
let xp = 0;
let health = 100;
let gold = 50;
let currentWeapon = 0;
let fighting;
let monsterHealth;
let inventory = ["stick"];
```
